<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        let lis = document.querySelectorAll(".box li");

        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                alert(i);
            };
        }
        // 是 var定义变量的时候 这个时候相当于是只有全局里的一个i 那么点谁弹的都是这个唯一的i就是4
        // 换成let后 每一次for循环 都会有一个大括号 都会生成一个作用域
        // 所以这里其实有四个i 每次点击函数 就会调用到作用域里的i 就会出现弹下标的情况
        // {let i=0; lis[0].onclick=function(){alert(0)}}
        // {let i=1;}
        // {let i=2;}
        // {let i=3;}
        // 作用域是什么？
        // 变量作用的范围

        // function fun1(){
        //     var a=10
        // }

        // function fun2(){
        //     var a=20
        // }

        // console.log(a);

        // let 是块级作用域 只要是个大括号就能区分
        // var 是函数作用域   只有函数的的大括号才能区分作用域

        // console.log(a); //undefined
        // var a = 10;


        // 以上的代码在预编译阶段会变成这样
        var a;
        console.log(a);
        a = 10

        console.log(b); //报错 因为let没有声明提升
        let b = 20
    </script>
</body>

</html>

</html>